<template>
  <div id="videoTop">
    <leftVideo></leftVideo>
    <userCenter></userCenter>
    <rightVideo></rightVideo>
  </div>
</template>
<script>
import leftVideo from "@/components/gameCenter/video/leftVideo.vue"
import rightVideo from "@/components/gameCenter/video/rightVideo.vue"
import userCenter from "@/components/gameCenter/video/userCenter.vue"
export default {
    name:"videos",
    components:{
        leftVideo,
        rightVideo,
        userCenter
    }
}
</script>
<style scoped>
#videoTop{
    width: 100%;
    height: 49%;
    border-bottom: 2px solid #e7b900;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
#videoTop .video{
    -webkit-box-flex: 1.0;
        -ms-flex: 1.0;
            flex: 1.0;
    border: 1px solid #e7b900;
    border-bottom: none;
    position: relative;
    overflow: hidden;
}
#videoTop .video .videos{
    width: 100%;
    height: 100%;
}
#videoTop .video .loginDV{
    width: 150px;
    height: 150px;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
    border: 4px solid #fff;
    border-bottom: none;
    border-left: none;
    border-radius: 50%;
    -webkit-animation: rou 1s infinite linear;
            animation: rou 1s infinite linear;
}
#videoTop .video span{
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
    color: #fff;
    display: block;
    width: 110px;
    height: 20px;
    line-height: 20px;
    text-align: center;
}
#videoTop .video ul{
    position: absolute;
}
#videoTop .video ul li:hover{
    color: #d0a701;
}
#videoTop .userCenter{
    width: 160px;
    height: 100%;
    background: #003366;
}
#videoTop .userCenter .logo{
    height: 109px;
    width: 158px;
    background: url(../../../../static/img/6e7630eb93773e2028d2fb580cda90f8.png);
    margin: 1px;
}
#videoTop .userCenter .logo .rayBox{
    width: 90px;
    height: 88px;
    border-radius: 50%;
    border-radius: 50%; 
    border-radius: 50%;
    top: 4px;
    position: relative;
    overflow: hidden;
    left: 34px;
}
</style>






